/* eslint-disable jsx-a11y/label-has-associated-control */
import React, { FC, useState, useEffect, useRef } from 'react';
import { ConnectState } from '@/models/connect';
import { loanInfo, getLoanTab } from '@/services/manager/work';
import { connect, ConnectProps, history } from 'umi';
import { desensitationName } from '@/utils';
import style from './LoanLayout.less';

interface BasicLayoutProps extends Required<ConnectProps> {
  prefixCls?: string;
  route: any;
}

const BasicLayout: FC<BasicLayoutProps> = (props) => {
  const { children, prefixCls, location } = props;
  const { query = {} } = history.location as any;
  const { orderNo, isEditor, point } = query;
  const [idCardNo, setIdCarNo] = useState('');
  const [userName, setUserName] = useState('');
  const userInfoData = useRef<any>();
  const [navData, setNavData] = useState([
    {
      value: 0,
      name: '贷款信息',
      path: `/work/detail?orderNo=${orderNo}&isEditor=${isEditor}&point=${point}`,
      isShow: false,
    },
    {
      value: 1,
      name: '影像材料',
      path: `/work/detail/image?orderNo=${orderNo}&isEditor=${isEditor}&point=${point}`,
      isShow: false,
    },
    {
      value: 2,
      name: '公积金信息',
      path: `/work/detail/fund?orderNo=${orderNo}&isEditor=${isEditor}&point=${point}`,
      isShow: false,
    },
    // {
    //   value: 2,
    //   name: '管理关系人',
    //   path: '/work/detail/related',
    // },
    // {
    //   value: 3,
    //   name: '自然人法定',
    //   path: '/work/detail/natrual',
    // },
    // {
    //   value: 4,
    //   name: '担保品信息',
    //   path: '/work/detail/guarantee',
    // },
    // {
    //   value: 5,
    //   name: '资料补充',
    //   path: '/work/detail/meterial',
    // },
  ]);

  const [tabMap] = useState({
    0: ['T4024'],
    1: ['T4022'],
    2: ['T4018'],
  });

  const changeNav = (path: String) => {
    history.push(path);
  };

  const goBack = () => {
    // eslint-disable-next-line radix
    if (parseInt(isEditor) === 1) {
      history.push('/work/list');
    } else {
      history.push('/flowing/list');
    }
  };

  const hideMsg = (str1) => {
    const reg = /^(.{4})(?:\d+)(.{4})$/;
    let str2 = '';
    const Empty = `******`;
    if (str1) {
      str2 = str1.replace(reg, '$1****$2');
    } else {
      str2 = Empty;
    }
    return str2;
  };

  useEffect(() => {
    (async () => {
      try {
        const tabData = await getLoanTab({ orderNo, type: 'OrderDetails' });
        if (tabData.code === 0) {
          const framesArr = tabData.cfgData.frames;

          if (framesArr) {
            for (let i = 0; i < navData.length; i += 1) {
              const item = navData[i];
              for (let j = 0; j < framesArr.length; j += 1) {
                const it = framesArr[j];
                if (tabMap[item.value].indexOf(it.code) !== -1) {
                  item.isShow = true;
                }
              }
            }
            setNavData([...navData]);
          }
        }

        const loanPesquest = await loanInfo({ orderNo });
        if (loanPesquest && loanPesquest.code === 0) {
          userInfoData.current = loanPesquest;
          const name = loanPesquest.data.JBXX.userName;
          const cardNo = loanPesquest.data.JBXX.idCard;
          setUserName(name);
          setIdCarNo(cardNo);
        }
      } finally {
        // setLoading(false);
      }
    })();
  }, []);
  return (
    <div className={prefixCls}>
      <div className={`${style.page}`}>
        <div className={style.baseInfo}>
          <div className={style.infoItem}>
            <p className={style.message}>
              <label>主借人：</label>
              {desensitationName(userName || '-')}
            </p>
            <p className={style.message}>
              <label>身份证号：</label>
              {hideMsg(idCardNo)}
            </p>
          </div>
          <div className={style.infoItem}>
            <p className={style.message}>
              <label>流水号：</label>
              {orderNo}
            </p>
            <div className={style.backButoom} onClick={goBack}>
              返回列表
            </div>
          </div>
        </div>
        <div className={style.navWrap}>
          {navData.map((item) => {
            return item.isShow ? (
              <div
                className={`${style.navItem} ${
                  location.pathname === item.path.split('?')[0] ? style.active : ''
                }`}
                key={item.value}
                onClick={() => changeNav(item.path)}
              >
                {item.name}
              </div>
            ) : null;
          })}
        </div>
      </div>
      {/* <Prompt
          when={true}
          message={location => '信息还没保存，确定离开吗？'}
      /> */}
      {/* <NavigationBar ref={navigationRef} title={currentRoute.title || 'title'} /> */}
      {children}
    </div>
  );
};

BasicLayout.defaultProps = {
  prefixCls: 'basic-layout',
};

export default connect(({ user }: ConnectState) => ({
  user,
}))(BasicLayout);
